<template>
    <div class="cropper-content">
      <div class="cropper-box">
        <div id="cropper" ref="dragContainer" class="cropper" :style="bodySty">
          <img v-for="(i,index) in list" :key="index" v-if="list.length" :ref="`imgContainer` + index" :src="i.file"  class="logo" :style="i.test" @mousedown="imgMove($event,index)">
        </div>
        <!--底部操作工具按钮-->
        <div class="footer-btn">
          <div class="scope-btn">
            <template v-if="showInputImg">
              <el-upload
                class="avatar-uploader"
                action="#"
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
              >
                <el-button size="small" type="primary">新增图像</el-button>
              </el-upload>
            </template>
          </div>
          <div v-if="showUploadImg" class="upload-btn" style="margin-left: 110px;">
          </div>
        </div>
      </div>
      <!--预览效果图-->
      <div class="show-preview" style="width: 500px;">
        <el-form ref="form" :model="formadd" :rules="ruleValidate" label-width="90px" style="width: 500px;">
          <el-form-item label="大小" prop="width">
            <el-row>
              <el-col :span="10">
                <div>
                  宽：<el-input-number :disabled="!formadd.file" v-model="formadd.width" style="margin-right: 5px; margin-left: 7px;width: 160px;" :min="0" :max="imWidth * size - formadd.left - 1" @change="handleChange(1)" />
                </div>
              </el-col>
              <el-col :span="10" :offset="2">
                <div>
                  高：<el-input-number :disabled="!formadd.file" v-model="formadd.height" :min="0" :max=" imHeight * size - formadd.top - 1" style="margin-left: 5px; width: 160px;" @change="handleChange(2)" />
                </div>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="不透明度" prop="alpha">
            <div class="block">
              <el-slider :disabled="!formadd.file" v-model="formadd.alpha" @input="alphaChange" />
            </div>
          </el-form-item>
          <el-form-item label="位置" prop="alpha">
            <el-row>
              <el-col :span="10">
                <div>
                  X：
                  <!-- <el-input-number v-model="formadd.topx - parrentLeft"  :min="0" style="margin-right: 20px; width: 125px;" @change="topChange('x',$event)" /> -->
                  <div class="input-number">
                    <el-button icon="el-icon-minus" :disabled="formadd.left == 0" @click="leftClik('1')"></el-button>
                    <el-input :disabled="!formadd.file" type="number" :min="0" v-model="formadd.left" @input="leftInputChange('left',$event)"></el-input>
                    <el-button icon="el-icon-plus" @click="leftClik('2')" :disabled="formadd.left + formadd.width >= imWidth * size" ></el-button>
                </div>

                </div>
              </el-col>
              <el-col :span="10" :offset="2">
                <div>
                  <!-- y：<el-input-number v-model="formadd.topy - parrentTop"  :min="0" style="width: 125px;" @change="topChange('y',$event)" /> -->
                    y: 
                    <div class="input-number">
                        <el-button icon="el-icon-minus" :disabled="formadd.top == 0" @click="topClik('1')"></el-button>
                        <el-input :disabled="!formadd.file" type="number" :min="0"  v-model="formadd.top" @input="leftInputChange('top',$event)"></el-input>
                        <el-button icon="el-icon-plus" @click="topClik(2)" :disabled="formadd.top + formadd.height >= imHeight * size"></el-button>
                    </div>
                </div>
              </el-col>
            </el-row>
          </el-form-item>
  
          <el-table
             border
              :data="list"
              ref="multipleTable"
              highlight-current-row
              style="width: 100%;margin-left: 10px;" @row-click="currentRow" > 
              <el-table-column  prop="id"  label="Id"> </el-table-column>
              <el-table-column prop="width"  label="宽"  >  </el-table-column>
              <el-table-column prop="height"   label="高"></el-table-column>
              <el-table-column prop="topx"   label="位置:X"></el-table-column>
              <el-table-column prop="topy"  label="位置:y"></el-table-column>
              <el-table-column label="操作" align="center">
                <template slot-scope="{row, $index}">
                <el-button type="danger" size="medium" @click="delHandler(row,row.id, $index)">删除</el-button>
              </template>
              </el-table-column>
      </el-table>
        </el-form>
      </div>
      <div style="width: 400px; margin-top: 40%;">
        <el-button type="primary"  @click="uploadImg('base64')">确 定</el-button>
      </div>
    </div>
  </template>
  
  <script>
// import { devchnlogos, delLogos } from '@/api/devchnlogos'
  export default {
    name: 'CropperImage',
    props: {
      Uid: {
        type: String,
        default: '123123'
      },
      Name: {
        type: String,
        default: ''
      },
      fileObj: {
        type: Object,
        default() {
          return {}
        }
      },
      datas: {
        type: Object,
        default() {
          return {}
        }
      },
      showInputImg: {
        type: Boolean,
        default: true
      },
      // id: {
      //   type: String,
      //   default: ''
      // },
      showUseImg: {
        type: Boolean,
        default: false
      },
      showUploadImg: {
        type: Boolean,
        default: false
      },
      visible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        sign:0,//第几张图片的标记
        list:[], //存储图片的列表
        formadd: {  //图片属性单独拎出来进行修改
          file: '', //图片地址
          top:0,  //位移
          left:0,  //位移
          test: {}, //图片的样式
          devChnId: this.id,
          alpha: 100,
          ratio: 0,
          height: 0,
          width: 0,
          topx: 0,
          topy: 0
        },
        parrentLeft:0, //距离父元素的左侧距离
        parrentTop:0,//距离父元素的顶部距离
        imgList:[],   //图像列表数据


        params: {
          zoomVal: 1,
          left: 0,
          top: 0,
          currentX: 0,
          currentY: 0,
          flag: false
        },

        previews: {},
        aspectratioArr: [
          { label: '保持原始比例缩放', value: 0 },
          { label: '拉升填充区域', value: 1 }
        ],
        crap: false,
        imageUrl: '',
        side: 0,
        selectedImg: {},
        proprt: false,
        option: {
          img: '', // 裁剪图片的地址
          outputSize: 1, // 裁剪生成图片的质量(可选0.1 - 1)
          outputType: 'jpeg', // 裁剪生成图片的格式（jpeg || png || webp）
          info: true, // 图片大小信息
          canScale: false, // 图片是否允许滚轮缩放
          autoCrop: true, // 是否默认生成截图框
          autoCropWidth: 300, // 默认生成截图框宽度
          autoCropHeight: 300, // 默认生成截图框高度
          fixed: false, // 是否开启截图框宽高固定比例
          fixedNumber: [1, 1.5], // 截图框的宽高比例
          full: false, // false按原比例裁切图片，不失真
          fixedBox: false, // 固定截图框大小，不允许改变
          canMove: true, // 上传图片是否可以移动
          canMoveBox: true, // 截图框能否拖动
          original: false, // 上传图片按照原始比例渲染
          centerBox: false, // 截图框是否被限制在图片里面
          height: true, // 是否按照设备的dpr 输出等比例图片
          infoTrue: false, // true为展示真实输出图片宽高，false展示看到的截图框宽高
          maxImgSize: 400, // 限制图片最大宽度和高度
          enlarge: 1, // 图片根据截图框输出比例倍数
          mode: 'contain' // 图片默认渲染方式
        },
        disableScaleBig: false,
        disableScaleSmall: false,
        originWidth: 0,
        ruleValidate: {
          ratio: [
            { required: true, message: '拉升比例比不能为空', trigger: 'change' }
          ],
          alpha: [
            { required: true, message: '不透明度不能为空', trigger: 'change' }
          ],
          devChnId: [
            { required: true, message: '频道类ID不能为空', trigger: 'change' }
          ]
        },
        originHeight: 0,
        bodySty: '',
        pictShow: false,
        zoomInShow: false,

        dragsX: 0,
        imgFlag: false,
        scaleNum: 1,
        imWidth: 640, // 盒子宽
        imHeight: 400, //盒子高
        size: null,
        width: null, //当前这张图片的宽
        height: null //当前这张图片的高
      }
    },
    computed: {
      classStyle() {
        return 'logo'
      }
    },
    watch: {
      fileObj: {
        handler(val, oldVal) {
          if (val && val.originFileObj) {
            this.crap = false
  
            const reader = new FileReader()
            reader.onload = (e) => {
              this.option.img = reader.result
            }
            // 转化为base64
            reader.readAsDataURL(val.originFileObj)
          }
        },
        deep: true,
        immediate: true
      },
      visible(val) {
        if (!val) {
          this.file = ''
          this.imgFlag = false
          location.reload();
        }
        // document.querySelector('#uploads').value = ''
        this.disableScaleBig = false
        this.option.img = ''
        this.selectedImg = {}
      },
      datas: {
        handler(val, oldVal) {
          this.size = val.channel.width / 640  //获取到当前点击这条列表信息传入的 宽度 , 默认比例通过640px做比例计算 
          this.imWidth = 640 //所以这里直接将图片的宽设置为了 640 size为缩放的比例 
          this.imHeight = val.channel.height / this.size  // 高度也=直接通过size比例去除 即可获得等比的高度
  
          this.bodySty = `width: ${640}px;height: ${Number(this.imHeight)}px;background: black;`
          this.parrentLeft = this.size * 20  //距离父元素的距离乘倍数
          this.parrentTop = this.size * 60  //距离父元素的距离乘倍数
          // if(val.logoList){
            this.list = val.logoList.map(item=>{
                      return  {
                        file:item.url,
                        top:item.topy,  
                        left:item.topx, 
                        test: {
                          height: item.height / this.size + 'px',  //除倍数
                          width: item.width / this.size + 'px',  
                          top:item.topy / this.size + 60 + 'px',  //回显起始位置,需要把到父元素的距离加上
                          left:item.topx / this.size + 20 + 'px', //回显起始位置,需要把到父元素的距离加上
                          opacity:item.alpha / 100, //回显起始位置,需要把到父元素的距离加上
                          'z-index':2,
                          'box-shadow':'none'
                        }, //图片的样式
                        id:item.id,
                        devChnId: item.devChnId,
                        alpha: item.alpha,
                        ratio: item.ratio,
                        height: item.height,
                        width: item.width,
                        topx: item.topx ,
                        topy: item.topy
                      }
                    })
          // }
  
          if(this.list.length){
           this.$nextTick(()=>{
             if(this.setCurrentstyle){
              let idx = this.list.findIndex(item=>item.id == this.setCurrentstyle.id)
              // 如果存在再list数组中 就选中这个条 如果不存在默认第一条
              if(idx !== -1){
                this.currentRow(this.list[idx])
                this.$refs.multipleTable.setCurrentRow(this.list[idx])
              }else{
                this.currentRow(this.list[0])
                this.$refs.multipleTable.setCurrentRow(this.list[0])
              }
             }else{
              // 没有数据默认i第一条
              this.currentRow(this.list[0])
              this.$refs.multipleTable.setCurrentRow(this.list[0])
             }
           })
          
          }
        },
        deep: true,
        immediate: true
      },
     
    },
    
    methods: {
      // 新增 start
      // input输入坐标 加判断
      leftInputChange(flag,val){
        val = Number(val)
        if(flag == 'left'){
            // 数值过大
            if(val > 640 * this.size - this.formadd.width) {
                this.formadd.left = this.formadd.topx
                this.$message.warning('输入数值过大')
                return 
            }
            this.formadd.left = val
            this.formadd.topx = val
            this.formadd.test.left = (this.formadd.left + this.parrentLeft) / this.size + 'px'
            
        }else{
            // 数值过大
            if(val > this.imHeight * this.size - this.formadd.height ) {
                this.formadd.top = this.formadd.topy
                this.$message.warning('输入数值过大')
                return 
            }
            this.formadd.top = val
            this.formadd.topy = val
            this.formadd.test.top = (this.formadd.top + this.parrentTop) / this.size + 'px'
        }
      },
      // x轴按钮点击
      leftClik(val){
        if(val == 1){
            this.formadd.left -= 1
            this.formadd.topx -= 1
            this.formadd.test.left = (this.formadd.left + this.parrentLeft) / this.size + 'px'
        }else{
            this.formadd.left += 1
            this.formadd.topx += 1
            this.formadd.test.left = (this.formadd.left + this.parrentLeft) / this.size + 'px'
        }
      },
      // y轴按钮点击
      topClik(val){
        if(val == 1){
            this.formadd.top -= 1
            this.formadd.topy -= 1
            this.formadd.test.top = (this.formadd.top + this.parrentTop) / this.size + 'px'

        }else{
            this.formadd.top += 1
            this.formadd.topy += 1
            this.formadd.test.top = (this.formadd.top + this.parrentTop) / this.size + 'px'
        }
      },
      // 新增 end

       // 实现图片拖拽
       imgMove(e,val) {
        // 层级做排它
        this.list.forEach(item=>{
          if(item.test['z-index'] == 10) {
            item.test['z-index'] = 2
            item.test['box-shadow'] = 'none'
          }
        })
        this.sign = val //标记一下
        this.formadd = this.list[this.sign] //锁定某一张图 合理利用一下浅拷贝
        this.$refs.multipleTable.setCurrentRow(this.formadd)  //设置表格行高亮
        this.formadd.test['z-index'] = 10 // 提升点击层级
        this.formadd.test['box-shadow'] = '0px 0px 8px 4px #955555' // 提升点击层级
        var s = 0
        var images = this.$refs['imgContainer' + this.sign][0]
        const maxwidths = `${images.width * this.scaleNum}`// 获取图片的宽度
        const maxheithts = `${images.height * this.scaleNum}`// 获取图片的高度
        
        const oImg = e.target
        const disX = e.clientX - oImg.offsetLeft//鼠标x坐标 - 事件源左侧距离父元素左侧距离 = 点击到图片的x轴偏移量
        const disY = e.clientY - oImg.offsetTop//鼠标y坐标 - 事件源上侧距离父元素上侧距离 = 点击到图片的y轴偏移量
        const dragX = this.$refs.dragContainer.offsetLeft  //容器距离父元素左侧的距离
        const imgX = this.$refs['imgContainer' + this.sign][0].offsetLeft //图片距离父元素左侧的距离
        if (this.scaleNum > 1) {
          s = images.width / 20 * this.scaleNum - 1
        }
        // 左右动
        if (dragX <= imgX) {
          document.onmousemove = (e) => {
            e.preventDefault()
            let left = e.clientX - disX
            let top = e.clientY - disY
            
            if (left >= (this.imWidth - maxwidths) + 20) {
              left = this.imWidth - maxwidths + 20
            }
            if (left <= 20) {
              left = 20  // 距离父元素的左侧是20px
            }
  
            if (top >= (Number(this.imHeight) - maxheithts + 60)) {
              top = Number(this.imHeight) - maxheithts + 60
            }
            if (top < 60) {
              top = 60 // 距离父元素的顶部是60px
            }
            this.formadd.test.left =  left + 'px'
            this.formadd.test.top =  top + 'px'
            
            this.formadd.topx = (left - 20) * this.size  //需要把父元素距离和子容器的距离减去再进行设置
            this.formadd.topy = (top - 60 ) * this.size  //需要把父元素距离和子容器的距离减去再进行设置
            this.formadd.left = this.formadd.topx 
            this.formadd.top = this.formadd.topy 
          }
          document.onmouseup = (e) => {
            document.onmousemove = null
            document.onmouseup = null
          }
        } else {
          document.onmousemove = (e) => {
            e.preventDefault()
            // const left = e.clientX - disX
            // const top = e.clientY - disY
            // this.test = this.test + `left: ${this.dragsX}px`
          }
          document.onmouseup = (e) => {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      },
      // 点击row
      currentRow(row){
        console.log('row: ', row);
        // 层级做排它
        this.list.forEach(item=>{
          if(item.test['z-index'] == 10) {
            item.test['z-index'] = 2
            item.test['box-shadow'] = 'none'
          }
        })
        this.formadd = row
        row.test['z-index'] = 10
        row.test['box-shadow'] = '0px 0px 8px 6px #955555' // 提升点击层级

      },
      // 删除
      // delHandler(id, index){
      //   console.log('index: ', index);
      //   console.log('id: ', id);
      //   this.list = this.list.filter((item,idx)=>index!=idx)
      //   // 清数据
      //   if( this.list.length ){
      //     this.formadd = this.list[0]
      //     this.formadd.test['z-index'] = 10
      //     this.formadd.test['box-shadow'] = '0px 0px 8px 2px #955555' // 提升点击层级
      //   }else{
      //     Object.assign(this.formadd, {  
      //       file: '', //图片地址
      //       top:0,  //位移
      //       left:0,  //位移
      //       test: {}, //图片的样式
      //       devChnId: this.id,
      //       alpha: 100,
      //       ratio: 0,
      //       height: 0,
      //       width: 0,
      //       topx: 0,
      //       topy: 0
      //     },)
      //   }
      //   console.log('this.formadd',this.formadd)
      // },
      delHandler(row,id, index){
        console.log('row111: ', row);

        console.log('id111: ', id);
        var _this = this
        this.$confirm('确定要删除该logo吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delLogos({ id }).then(res => {
          
            if (res.success === 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
            
              this.$emit('getfacelist',row)
              this.$emit('isflag',this.falgxx)
              this.list = this.list.filter(item=>item.id != id)
              // 清数据
              if( this.list.length ){
                this.formadd = this.list[0]
                this.formadd.test['z-index'] = 10
                this.formadd.test['box-shadow'] = '0px 0px 8px 2px #955555' // 提升点击层级
              }else{
                Object.assign(this.formadd, {  
                  file: '', //图片地址
                  top:0,  //位移
                  left:0,  //位移
                  test: {}, //图片的样式
                  devChnId: this.id,
                  alpha: 100,
                  ratio: 0,
                  height: 0,
                  width: 0,
                  topx: 0,
                  topy: 0
                })
              }

              console.log('this.list',this.list)
            } else {
              _this.$message.error(res.data.message || '请求出错！')
            }
          }).catch(error => {
      
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })

      },
      // 透明度
      alphaChange() {
        this.formadd.test.opacity = this.formadd.alpha / 100
      },
      // 宽高触发回调
      handleChange(i) {
        if (i == 1) {
          this.formadd.test.width = this.formadd.width / this.size + 'px'
        } else {
          this.formadd.test.height = this.formadd.height / this.size + 'px'
        }
      },
      //   图片上传前
      async  beforeAvatarUpload(file) {
        var base = await this.getBase64(file)
        let obj = {
            file:base, //图片地址
            top:0,  //位移
            left:0,  //位移
            test: {
              'z-index':10,
              'box-shadow':'0px 0px 8px 2px #955555'
            }, //图片的样式
            devChnId: this.id,
            alpha: 100,
            ratio: 0,
            height: 0,
            width: 0,
            topx: 0,
            topy: 0,
            sign:true // 标记  在删除时如果是sign标记为真 那么就直接filter
        }
        // 层级做排它
        this.list.forEach(item=>{
          if(item.test['z-index'] == 10) {
            item.test['z-index'] = 2
            item.test['box-shadow'] = 'none'
          }
        })
        
        this.scaleNum = 1
        var image = new Image() //创建了一个img
        image.src = base 
        this.disableScaleBig = false
        // 图片加载
        image.onload = () => {
            // 图片宽高小于容器的宽高
          if (image.width <= this.imWidth && image.height <= this.imHeight) {
            this.imgFlag = true
            // 图片参数赋值
            obj.test.width = image.width / this.size + 'px'
            obj.test.height = image.height / this.size + 'px'
            obj.test['margin-top'] = '0px'
            obj.width = image.width
            obj.height = image.height

          } else {
            this.imgFlag = false
            //图片宽大于容器宽
            if (image.width > this.imWidth) {
              var w = this.imWidth / image.width //宽度比例
              var h = image.height * w 

              if (h > image.height) {
                var el = image.height / h
                obj.test.width = this.imWidth * el + 'px'
                obj.test.height = this.imHeight + 'px'
                obj.test['margin-top'] = '0px'

                this.imgFlag = true
              } else {
                obj.test.width = this.imWidth + 'px'
                obj.test.height = h + 'px'
                obj.test['margin-top'] = '0px'

                this.imgFlag = true
              }
            } else if (image.height > this.imHeight && image.width < this.imWidth) {
              var h = this.imHeigh / image.height
              var w = image.width * h
              obj.test.width = w + 'px'
              obj.test.height = imHeight + 'px'
              obj.test['margin-top'] = '0px'
              this.imgFlag = true
            }
          }
          obj.test.width = image.width / this.size + 'px'
          obj.test.height = image.height / this.size + 'px'
          obj.test['margin-top'] = '0px'

          obj.width = image.width
          obj.height = image.height
          // 装一个新对象去循环
          this.list.push(obj)
          this.$refs.multipleTable.setCurrentRow(obj)
          this.formadd = this.list[this.list.length - 1]
        }

      },

      // 实现图片放大缩小
      bbimg() {
        const e = e || window.event
        this.params.zoomVal += e.wheelDelta / 1200
        if (this.params.zoomVal >= 0.2) {
          this.test = `transform:scale(${this.params.zoomVal});`
        } else {
          this.params.zoomVal = 0.2
          this.test = `transform:scale(${this.params.zoomVal});`
          return false
        }
      },

      // 图片缩放
      changeScale(num) {
        // this.test =  this.test + `transform: scale(${1.8});`
        var flag = false
        var w = this.$refs.imgContainer.style.width
        var h = this.$refs.imgContainer.style.height
        if (num === 1) {
          if (parseFloat(w) >= this.imWidth || parseFloat(h) >= this.imHeigh) {
            flag = true
          }
          if ((this.scaleNum + 0.1) * parseFloat(w) < Number(this.imWidth) && (this.scaleNum + 0.1) * parseFloat(h) < Number(this.imHeight)) {
            this.disableScaleBig = false
            this.scaleNum = this.scaleNum + 0.1
            this.test = this.test + `transform: scale(${this.scaleNum});`
          } else {
            if (flag) {
              this.scaleNum = 1
              this.test = this.test + `transform: scale(${1});`
            }
            this.disableScaleBig = true
          }
        } else {
          if ((this.scaleNum - 0.1) > 0.1) {
            this.scaleNum = this.scaleNum - 0.1
            this.test = this.test + `transform: scale(${this.scaleNum});`
            this.disableScaleBig = false
          }
        }
        this.test = this.test + `transform-origin:left top;`
      },


    //   确认回调
      uploadImg(type) {
        const _this = this
  
        // var w = this.$refs.imgContainer.style.width
        // var h = this.$refs.imgContainer.style.height
        // if (!this.file) {
        //   this.$message.error('请选择图片！')
        //   return
        // }
        // var x = 0
        // var y = 0
        // if (this.formadd.topx) {
        //   x = this.formadd.topx
        // }
        // if (this.formadd.topy) {
        //   y = this.formadd.topy
        // }
        console.log(this.list)
        // const imgInfo = {
        //   logofile: this.file,
        //   side: this.side,
        //   devChnId: this.formadd.devChnId,
        //   ratio: this.formadd.ratio,
        //   alpha: this.formadd.alpha,
        //   width: this.formadd.width,
        //   height: this.formadd.height,
        //   topx: x,
        //   topy: y
        // }
  
        this.$emit('uploadCropperImg', this.list)
        console.log('this.list: ', this.list);
        // this.$refs.form.resetFields()
      },
      // 图片处理函数  
      getBase64(file) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader()
          reader.readAsDataURL(file)
          reader.onload = () => resolve(reader.result)
          reader.onerror = error => reject(error)
        })
      },
    }
  
  }
  </script>
  
  <style scoped >
  /deep/  input::-webkit-outer-spin-button,
  /deep/  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  /deep/ input[type="number"]{
    -moz-appearance: textfield;
  }
  .cropper-content{
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
  }
  .cropper-content .cropper-box{
    flex: 1;
    width: 100%;
  }
  /* .cropper-content .cropper-box .cropper{
    width: auto;
    height: 400px;
  } */
  .cropper-content .show-preview{
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
  }
  .cropper-content .show-preview .preview {
    overflow: hidden;
    border:1px solid #67c23a;
    background: #cccccc;
  }
  /* .cropper-content .show-preview .preview img {
    max-width: unset;
  } */
  .footer-btn{
    margin-top: 15px;
    display: flex;
    display: -webkit-flex;
    justify-content: flex-end;
  }
  .footer-btn .scope-btn{
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
  }
  .footer-btn .upload-btn{
    flex: 1;
    -webkit-flex: 1;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
  }
  .footer-btn .btn {
    outline: none;
    display: inline-block;
    line-height: 2;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 5px 15px;
    font-size: 12px;
    border-radius: 3px;
    color: #fff;
    background-color: #409EFF;
    border-color: #409EFF;
    margin-right: 10px;
  }
  .footer-btn .ant-btn {
    margin-right: 10px;
  }
  .setting_box  .setting_zoom {
      position: absolute;
      z-index: 1000;
      top: 20px;
      color: #fff;
      opacity: 1;
      right: 50px;
    }
    .setting_box .setting_close {
      position: absolute;
      z-index: 1000;
      top: 20px;
      color: #fff;
      opacity: 1;
      right: 10px;
    }
  .logo {
    position: absolute;
    z-index: 22;
    cursor: move;
  }
  .zoom-box {
    cursor: zoom-in;
  }
  .photo_box {
    margin: 0 5px 5px 0;
  }
  .input-number{
    display: inline-block;
    display: flex;
    width: 160px;
  }
  .input-number /deep/  .el-button{
    padding: 11.5px 12.5px;
    text-align: center;
    height: auto;
    text-align: center;
    background: #F5F7FA;
    color: #606266;
    cursor: pointer;
    font-size: 13px;
  }
  /deep/.input-number>:nth-child(1){
    border-radius: 4px 0 0 4px;
  }
  /deep/.input-number>:nth-child(2) .el-input__inner{
    text-align: center;
     padding: 0;
     border-radius: 0;
     border-left: none;
     border-right: none;
  }
  /deep/.input-number>:nth-child(3){
    border-radius: 0 4px 4px 0;
  }

/deep/ .el-button.is-disabled, .el-button.is-disabled:focus, .el-button.is-disabled:hover{
  color: #C0C4CC;
  cursor: not-allowed;

}

  </style>
  